<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      :root {
        --line-color: #6fbe44; /* 线条颜色 */
        --point-color: #16a44a; /* 点颜色 */

        --chart-thickness: 4px;
        --border: 1px solid rgba(211, 211, 211, 0.6);
      }

      * {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
      }

      ul {
        list-style: none;
      }

      a {
        text-decoration: none;
        color: inherit;
      }

      body {
        font-family: "Montserrat", sans-serif;
      }

      .container {
        margin: 50px auto;
        padding: 0 15px;
        max-width: 1600px;
      }

      .wrapper {
        display: flex;
        gap: 20px;
      }

      .chart-wrapper {
        display: flex;
        gap: 20px;
        padding: 20px;
        border: var(--border);
        flex: 2;
        position: relative;
      }

      /* CHART-Y
–––––––––––––––––––––––––––––––––––––––––––––––––– */
      .chart-wrapper .chart-y li {
        padding: 0 15px;
      }

      .chart-wrapper .chart-y li + li {
        margin-top: 60px;
      }
      .chart-wrapper .chart-y li:last-child {
        text-indent: -1000px;
        overflow: hidden;
      }

      .chart-wrapper .line-grad {
        position: absolute;
        left: 90px;
        top: 20px;
        bottom: 20px;
        right: 20px;
      }

      .chart-wrapper .line-grad li {
        border-bottom: var(--border);
        overflow: hidden;
        text-indent: -1000px;
        transform: translateY(-10px);
      }

      .chart-wrapper .line-grad li:last-child {
        border-bottom: 0;
        text-indent: -1000px;
        overflow: hidden;
      }
      /* CHART-X
–––––––––––––––––––––––––––––––––––––––––––––––––– */
      .chart-wrapper .chart-x {
        display: flex;
        flex-grow: 1;
      }

      .chart-wrapper .chart-x li {
        position: relative;
        display: flex;
        align-items: flex-end;
        flex: 1;
      }

      .chart-wrapper .chart-x li::before,
      .chart-wrapper .chart-x li::after {
        content: "";
        position: absolute;
        left: -2px;
        top: -2px;
        background: var(--point-color);
      }

      .chart-wrapper .chart-x li::before {
        top: 0;
        width: 100%;
        height: 100%;
        clip-path: polygon(
          0 calc(100% - var(--start)),
          0 calc(100% - var(--start)),
          0 calc(100% - var(--start)),
          0 calc(100% - var(--start))
        );
        background: var(--line-color); /* 设置折线颜色 */
        transition: clip-path 0.5s calc(var(--delay, 0) * 0.5s);
      }

      .chart-wrapper .chart-x li::after {
        top: calc(100% - var(--start));
        width: 10px;
        height: 10px;
        border-radius: 50%;
        transform: translateX(-50%) translateY(-30%);
        background: var(--point-color); /* 设置点的颜色 */
      }

      .loaded .chart-wrapper .chart-x li::before {
        clip-path: polygon(
          0 calc(100% - var(--start)),
          100% calc(100% - var(--end)),
          100% calc(calc(100% - var(--end)) + var(--chart-thickness)),
          0 calc(calc(100% - var(--start)) + var(--chart-thickness))
        );
      }

      .loaded .chart-wrapper .chart-x li span {
        transform: rotate(-45deg);
        font-family: Source Sans Pro;
        color: #212221;
        font-size: 18px;
      }
      .loaded .chart-wrapper .chart-x li:last-child::before {
        clip-path: polygon(
          0 calc(100% - var(--start)),
          100% calc(100% - var(--end)),
          100% calc(100% - var(--end)),
          0 calc(100% - var(--start))
        );
      }
      .Monthly {
        text-align: center;
        padding: 20px;
        color: #212221;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="wrapper">
        <div class="chart-wrapper">
          <ul class="chart-y">
            <li>130K</li>
            <li>125K</li>
            <li>120K</li>
            <li>0K</li>
          </ul>
          <ul class="chart-y line-grad">
            <li>130K</li>
            <li>125K</li>
            <li>120K</li>
            <li>0K</li>
          </ul>
          <ul class="chart-x">
            <li style="--start: 80%; --end: 60%">
              <span>Jul 2023</span>
            </li>
            <li style="--start: 60%; --end: 50%; --delay: 1">
              <span>Aug 2023</span>
            </li>
            <li style="--start: 50%; --end: 70%; --delay: 2">
              <span>Sep 2023</span>
            </li>
            <li style="--start: 70%; --end: 80%; --delay: 3">
              <span>Oct 2023</span>
            </li>
            <li style="--start: 80%; --end: 80%; --delay: 4">
              <span>Nov 2023</span>
            </li>
            <li style="--start: 80%; --end: 80%; --delay: 5">
              <span>Dec 2023</span>
            </li>
            <li style="--start: 80%; --end: 80%; --delay: 6">
              <span>Jan 2023</span>
            </li>

            <li style="--start: 80%; --end: 80%; --delay: 7">
              <span>Feb 2023</span>
            </li>
            <li style="--start: 80%; --end: 80%; --delay: 8">
              <span>Mar 2023</span>
            </li>
            <li style="--start: 80%; --end: 80%; --delay: 9">
              <span>Apr 2023</span>
            </li>
            <li style="--start: 80%; --end: 80%; --delay: 10">
              <span>May 2023</span>
            </li>
            <li style="--start: 80%; --end: 80%; --delay: 11">
              <span>Jun 2023</span>
            </li>
          </ul>
        </div>
      </div>
      <p class="Monthly">Monthly</p>
    </div>
  </body>

  <script>
    window.addEventListener("load", function () {
      document.body.classList.add("loaded");
    });
  </script>
</html>
